<template>
    <view class="tabbar">
        <view class="bar d-flex" :class="{
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                }">
            <!-- :class="{active:activeBar.activeBar==='faxian'}" -->
            <!-- <view class="tab d-flex d-c a-center j-center" @tap="setActiveBar('faxian')" :class="{active:activeBar.activeBar==='jilu'}">
                        <view class="img_content">
                            <image class="icon base" src="/static/tabbar/discover.png"></image>
                            <image class="icon hover" src="/static/tabbar/discover-hover.png"></image>
                        </view>
                         <text class="text">发现</text>
                </view> -->
			
            <view
                class="tab d-flex d-c a-center j-center"
                @tap="setActiveBar('faxian')"
                :class="{
                    active: props.activebar === 'faxian',
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                }"
            >
                <view class="img_content">
                    <image
                        class="icon base"
                        src="/static/tabbar/discover.png"
                    ></image>
                    <image
                        class="icon hover"
                        src="/static/tabbar/discover-hover.png"
                    ></image>
                </view>
                <text class="text">发现</text>
            </view>
		
            <!-- IM_STORE.quanziTotalUnread -->
			
            <tm-badge
                @tap="setActiveBar('quanzi')"
                :count="IM_STORE.quanziTotalUnread"
                :maxCount="999"
                :padding="[3.5, 3.5]"
                color="#FF5831"
                :top="systemInfo.platform === 'ios' ? 5 : 5"
                :left="80"
            >
                <view
                    class="tab d-flex d-c a-center j-center"
                    @tap="setActiveBar('quanzi')"
                    :class="{
                        active: props.activebar === 'quanzi',
                        ios: systemInfo.platform === 'ios',
                        android: systemInfo.platform === 'android',
                    }"
                >
                    <view class="img_content">
                        <image
                            class="icon base"
                            src="/static/tabbar/quanzi.png"
                        ></image>
                        <image
                            class="icon hover"
                            src="/static/tabbar/quanzi-hover.png"
                        ></image>
                    </view>

                    <text class="text">消息</text>
                </view>
            </tm-badge>
			
            <view
                class="tab d-flex d-c a-center j-center"
                @tap="setActiveBar('jilu')"
                :class="{
                    active: props.activebar === 'jilu',
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                }"
            >
                <view class="img_content">
                    <image
                        class="icon base"
                        src="/static/tabbar/jilu.png"
                    ></image>
                    <image
                        class="icon hover"
                        src="/static/tabbar/jilu-hover.png"
                    ></image>
                </view>
                <text class="text">{{ACTIVE_BAR.text}}</text>
            </view>
            <view
                class="tab d-flex d-c a-center j-center"
                @tap="setActiveBar('jihua')"
                :class="{
                    active: props.activebar === 'jihua',
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                }"
            >
                <view class="img_content">
                    <image
                        class="icon base"
                        src="/static/tabbar/jihua.png"
                    ></image>
                    <image
                        class="icon hover"
                        src="/static/tabbar/jihua-hover.png"
                    ></image>
                </view>
                <text class="text">计划</text>
            </view>
            <view
                class="tab d-flex d-c a-center j-center"
                @tap="setActiveBar('wode')"
                :class="{
                    active: props.activebar === 'wode',
                    ios: systemInfo.platform === 'ios',
                    android: systemInfo.platform === 'android',
                }"
            >
                <view class="img_content">
                    <image
                        class="icon base"
                        src="/static/tabbar/wode.png"
                    ></image>
                    <image
                        class="icon hover"
                        src="/static/tabbar/wode-hover.png"
                    ></image>
                </view>
                <text class="text">我的</text>
            </view>
        </view>

        <view
            style="width: 750rpx; background: #fff;"
            :style="{ height: systemInfo.safeAreaInsets?.bottom + 'px' }"
        ></view>
    </view>
</template>

<script setup lang="ts">
import { onShow } from "@dcloudio/uni-app";
import { onMounted, computed, ref } from "vue";
import { imStore } from "@/store/imStore";
import { activeBar } from "@/store/activeBar";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { checkBodyData } from "@/hooks/bodyData";



const IM_STORE = imStore();
const systemInfo = systemInfoStore();

const ACTIVE_BAR = activeBar();


const props = defineProps({
    activebar: {
        type: String,
        required: true,
    },
});

const setActiveBar = (text: string) => {

    if (text === "faxian") {
        //switchTab
        /* #ifdef H5 */

        uni.switchTab({
            url: "/pages/discover/discover",
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: "/pages/discover/discover",
        });
        /*#endif*/

        return;
    }
    if (text === "quanzi") {
        /* #ifdef H5 */
        uni.switchTab({
            url: "/pages/quanzi/quanzi",
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: "/pages/quanzi/quanzi",
        });
        /*#endif*/

        return;
    }

    if (text === "jilu") {
        if (!checkBodyData()) {
            return;
        }

        /* #ifdef H5 */
        uni.switchTab({
            url: "/pages/record/record",
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: "/pages/record/record",
        });
        /*#endif*/
        return;
    }

    if (text === "jihua") {
        /* #ifdef H5 */
        uni.switchTab({
            url: "/pages/plan/plan",
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: "/pages/plan/plan",
        });
        /*#endif*/
        return;
    }

    if (text === "wode") {
        /* #ifdef H5 */
        uni.switchTab({
            url: "/pages/mine/mine",
        });
        /*#endif*/

        /*#ifdef APP-PLUS*/
        uni.switchTab({
            url: "/pages/mine/mine",
        });
        /*#endif*/
        return;
    }
};

onMounted(() => {
    uni.getSystemInfo({
        success(result) {
            const { bottom } = result.safeAreaInsets;
            systemInfo.setSystemInfo(result);
        },
    });
});

</script>

<style lang="scss" scoped>
.tabbar {
    position: fixed;
    width: 750rpx;
    z-index: 400;
    left: 0;
    right: 0;
    border-top: 1rpx solid #ddd;
    box-shadow: 0 0 5px #ddd;
    background-color: #fff;
    bottom: 0;
    .bar {
        width: 750rpx;
        height: 120rpx;
        flex-direction: row;
        &.ios{
            height:100rpx;
        }

        .tab {
            width: 150rpx;
            height: 120rpx;
            justify-content: center;
            align-items: center;
            &.ios {
                height:100rpx;
                justify-content: flex-end;
            }
            .img_content {
                position: relative;
                width: 45rpx;
                height: 45rpx;
                overflow: hidden;
            }
            .text {
                font-size: 21rpx;
                margin-top: 5rpx;
                color: #606060;
            }
            .icon {
                position: absolute;
                width: 45rpx;
                height: 45rpx;
                top: 0;
                left: 0;
                z-index: 1;
                &.base {
                    transform: translateX(0);
                }
                &.hover {
                    transform: translateX(50rpx);
                }
            }

            &.active {
                .text {
                    color: $slim-main;
                }
                .icon {
                    &.base {
                        transform: translateX(50rpx);
                    }
                    &.hover {
                        transform: translateX(0rpx);
                    }
                }
            }
        }
    }
}
</style>
